<template>
  <!-- 本月和上月的订单统计 -->
  <div id="month"></div>
</template>
<script>
import { onMounted, inject } from "vue";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const echarts = inject("echarts");
    let chartInstance = null;
    const initEcharts = () => {
      chartInstance = echarts.init(document.getElementById("month"), "chalk");
      // 绘制图表
      chartInstance.setOption({
        title: {
          text: "订单统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["本月", "上月"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          // top:'12%',
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "本月",
            type: "line",
            stack: "Total",
            data: props.list.slice(0, 6),
          },
          {
            name: "上月",
            type: "line",
            stack: "Total",
            data: props.list.slice(7, 11),
          },
        ],
      });
      screenAdapter(chartInstance);
    };
    const screenAdapter = () => {
      const adapterOption = {};
      chartInstance.setOption(adapterOption);
      chartInstance.resize();
    };
    onMounted(() => {
      // 初始化图表
      initEcharts();
      // 适配图表
      screenAdapter();
      window.addEventListener("resize", screenAdapter);
    });
  },
};
</script>

<style scoped lang="less">
#month {
  width: 100%;
  // height: 300px;
  height: 100%;
}
</style>
